<template>
  <div>
    <!--  -->
    <div style="padding: 0 12px 6px 12px;;background-color: #FFFFFF;display: flex;align-items: center;justify-content: space-between;">
      <div style="font-size: 14px">纸质成绩单寄送地址</div>
      <div
        style="font-size: 14px;color: #007AFF;"
        @click="addMailHandle"
      >添加</div>
    </div>
    <div
      v-for="(item,index) in mailList"
      :key="index"
    >
      <div
        style="font-size: 14px;color: #FF0000;padding: 5px 12px;text-align: right;
        background-color: #ffffff;"
        v-if="index != 0"
        @click="delMailHandle(index)"
      >删除</div>
      <!-- form item -->
      <div style="display: flex;align-items: center;padding:6px 12px;background-color: #FFFFFF;">
        <div style="align-items: center;background-color: #FFFFFF;flex: 1;">
          <div style="font-size: 12px;color: #999999;">邮编</div>
          <van-field
            v-model="item.postalCode"
            type="text"
            placeholder="请输入"
            style="font-size: 12px;flex: 1;background-color: #F5F5F5;padding: 3px 5px;margin-top: 5px;"
          />
        </div>
        <!-- line -->
        <div style="width: 5px;"></div>
        <div style="align-items: center;background-color: #FFFFFF;flex: 1;">
          <div style="font-size: 12px;color: #999999;">收件人</div>
          <van-field
            v-model="item.recName"
            type="text"
            placeholder="请输入"
            style="font-size: 12px;flex: 1;background-color: #F5F5F5;padding: 3px 5px;margin-top: 5px;"
          />
        </div>
      </div>
      <!-- form item -->
      <div style="display: flex;align-items: center;padding:6px 12px;background-color: #FFFFFF;">
        <div style="align-items: center;background-color: #FFFFFF;flex: 1;">
          <div style="font-size: 12px;color: #999999;">收件人电话</div>
          <van-field
            v-model="item.recPhone"
            type="text"
            placeholder="请输入"
            style="font-size: 12px;flex: 1;background-color: #F5F5F5;padding: 3px 5px;margin-top: 5px;"
          />
        </div>
        <!-- line -->
        <div style="width: 5px;"></div>
        <div style="align-items: center;background-color: #FFFFFF;flex: 1;">
          <div style="font-size: 12px;color: #999999;">收件地址</div>
          <van-field
            v-model="item.recAdd"
            type="text"
            placeholder="请输入国家-州/省-城市-街道"
            style="font-size: 12px;flex: 1;background-color: #F5F5F5;padding: 3px 5px;margin-top: 5px;"
          />
        </div>
      </div>
    </div>

    <!--  -->
    <div style="padding: 0 12px 6px 12px;font-size: 14px;background-color: #FFFFFF;">电子成绩单寄送地址</div>
    <div v-for="(item,idx) in emailList">
      <!-- form item -->
      <div style="display: flex;align-items: center;padding:6px 12px;background-color: #FFFFFF;">
        <div style="align-items: center;background-color: #FFFFFF;flex: 1;">
          <div style="font-size: 12px;color: #999999;">收件人</div>
          <van-field
            v-model="item.recName"
            type="text"
            placeholder="请输入"
            style="font-size: 12px;flex: 1;background-color: #F5F5F5;padding: 3px 5px;margin-top: 5px;"
          />
        </div>
        <!-- line -->
        <div style="width: 5px;"></div>
        <div style="align-items: center;background-color: #FFFFFF;flex: 1;">
          <div style="font-size: 12px;color: #999999;">邮箱</div>
          <van-field
            v-model="item.email"
            type="text"
            placeholder="学校成绩单收件邮箱"
            style="font-size: 12px;flex: 1;background-color: #F5F5F5;padding: 3px 5px;margin-top: 5px;"
          />
        </div>
      </div>
    </div>

    <!-- -->
    <div style="padding: 0 12px 6px 12px;font-size: 14px;background-color: #FFFFFF;">跟进频率</div>
    <!-- form item -->
    <div style="display: flex;align-items: center;padding:6px 12px;background-color: #FFFFFF;">
      <div style="align-items: center;background-color: #FFFFFF;flex: 1;">
        <div style="font-size: 12px;color: #999999;">跟进周期</div>
        <div style="display: flex;align-items: center;">
          <van-field
            type="text"
            placeholder="请输入天数"
            v-model="data.followRate"
            style="font-size: 12px;flex: 1;background-color: #F5F5F5;padding: 3px 5px;margin-top: 5px;"
          />
          <div style="font-size: 12px;color: #333333;margin-left: 12px;">天/跟进一次</div>
        </div>
      </div>
    </div>

    <!--  -->
    <div style="padding: 6px 12px;background-color: #FFFFFF;display: flex;align-items: center;justify-content: space-between;">
      <div style="font-size: 14px">意向信息</div>
      <div
        style="font-size: 14px;color: #007AFF;"
        @click="addCourseHandle"
      >添加</div>
    </div>

    <div v-for="(item,index) in courseList">
      <div
        style="font-size: 14px;color: #FF0000;padding: 5px 12px;text-align: right;background-color: #ffffff;"
        v-if="index != 0"
        @click="delCourseHandle(index)"
      >删除</div>
      <!-- form item -->
      <div style="display: flex;align-items: center;padding:6px 12px;background-color: #FFFFFF;">
        <div style="align-items: center;background-color: #FFFFFF;flex: 1;">
          <div style="font-size: 12px;color: #999999;">意向学校</div>
          <van-field
            v-model="item.school"
            type="text"
            placeholder="请输入"
            style="font-size: 12px;flex: 1;background-color: #F5F5F5;padding: 3px 5px;margin-top: 5px;"
          />
        </div>
        <!-- line -->
        <div style="width: 5px;"></div>
        <div style="align-items: center;background-color: #FFFFFF;flex: 1;">
          <div style="font-size: 12px;color: #999999;">意向项目</div>
          <div @click="showxm(item)">
            <van-field
              v-model="item.projectName"
              type="text"
              placeholder="请选择"
              style="font-size: 12px;flex: 1;background-color: #F5F5F5;padding: 3px 5px;margin-top: 5px;"
            />
          </div>
        </div>
      </div>

      <!-- form item -->
      <div style="display: flex;align-items: center;padding:6px 12px;background-color: #FFFFFF;">
        <div style="align-items: center;background-color: #FFFFFF;flex: 1;">
          <div style="font-size: 12px;color: #999999;">意向课程</div>
          <van-field
            type="text"
            v-model="item.course"
            placeholder="请输入"
            style="font-size: 12px;flex: 1;background-color: #F5F5F5;padding: 3px 5px;margin-top: 5px;"
          />
        </div>
        <!-- line -->
        <div style="width: 5px;"></div>
        <div style="align-items: center;background-color: #FFFFFF;flex: 1;">
          <div style="font-size: 12px;color: #999999;">课程认证状态</div>
          <div @click="showrz(item)">
            <van-field
              type="text"
              v-model="item.authStatusName"
              placeholder="请选择"
              style="font-size: 12px;flex: 1;background-color: #F5F5F5;padding: 3px 5px;margin-top: 5px;"
            />
          </div>
        </div>
      </div>
      <div style="font-size: 12px;color: #999999;padding: 6px 12px;background-color: #ffffff;">认证截图</div>
      <div style="padding: 6px 12px;display: flex;align-items: center;background-color: #ffffff;">
        <van-uploader
          v-model="item.fileList"
          multiple
          :after-read="imgAfterRead"
          @click-upload="imgclickUpload(item)"
          :max-count="1"
        />
      </div>
    </div>

    <!--  -->
    <div style="padding: 6px 12px;background-color: #FFFFFF;display: flex;align-items: center;justify-content: space-between;">
      <div style="font-size: 14px">备注</div>
    </div>
    <!-- form item -->
    <div style="background-color: #FFFFFF;">
      <textarea
        class="tv"
        placeholder="请输入备注"
        v-model="data.remark"
      ></textarea>
    </div>

    <!-- button -->
    <div style="padding: 12px;background-color: #FFFFFF;padding-bottom: 40px;">
      <div
        @click="btnClick"
        style="border: 1px solid #007AFF;text-align: center;padding: 5px;border-radius: 4px;color: #007AFF;font-size: 14px;"
      >
        完成
      </div>
    </div>

    <van-action-sheet
      v-model="intentionProject_show"
      description="意向项目"
      :actions="intentionProjects"
      @select="intentionProject_select"
      @opended=""
      cancel-text="取消"
    />
    <van-action-sheet
      v-model="course_status_show"
      description="认证状态"
      :actions="course_statuss"
      @select="course_status_select"
      cancel-text="取消"
    />
  </div>
</template>

<script>
import { uploadFile } from "../../../api/person";
export default {
  props: ["data"],
  data() {
    return {
      // data:{}
      //纸质与电子成绩单地址
      // [{’id’:’新增默认传0’,’postalCode’:’邮编’,’recName’:’收件人’,’recPhone’:’收件人电话’,’recAdd’:’收件人地址’,’tranType’:’地址类型:1纸质2电子’,’email’:’邮箱’,’backEmail’:’备用邮箱’}]
      // 意向信息,以JSON字符串数组如[{’id’:’新增默认传0’,’school’:’意向学校’,’project’:’意向项目’,’course’:’意向课程,’authStatus’:’课程认证状态,’认证截图地址’:’authUrl,’failCause’:’失败原因’}]
      intentionProject_show: false,
      intentionProjects: [],
      course_status_show: false,
      course_statuss: [],
      currentCourse: undefined,

      //纸质地址
      mailList: [
        {
          id: "",
          postalCode: "",
          recName: "",
          recPhone: "",
          recAdd: "",
          tranType: "1",
        },
      ],
      emailList: [
        {
          id: "0",
          recName: "",
          tranType: "2",
          email: "",
          backEmail: "",
        },
      ],
      courseList: [
        {
          id: "",
          school: "",
          project: "",
          course: "",
          authStatus: "",
          authUrl: "",
          failCause: "",
          fileList: [
            // {
            //   url: "https://img01.yzcdn.cn/vant/leaf.jpg",
            //   deletable: true,
            //   imageFit: "contain",
            // },
          ],
          currentCourse: undefined,
        },
      ],
    };
  },
  mounted() {
    this.data.purpose = null;
    this.data.transcriptAdd = null;
    let arr = global.dictList;
    for (const obj of arr) {
      if (obj.code == "intentionProject") {
        //跟进进度
        this.intentionProjects.push({ value: obj.value, name: obj.label });
      }
      if (obj.code == "course_status") {
        //跟进进度
        this.course_statuss.push({ value: obj.value, name: obj.label });
      }
    }
  },
  methods: {
    btnClick() {
      let mailstr = JSON.stringify([...this.mailList, ...this.emailList]);
      this.data.transcriptAdd = mailstr;

      for (const obj of this.fileList) {
        let { url } = obj.fileList[0];
        obj.authUrl = url;
      }
      let coursestr = JSON.stringify(this.courseList);
      this.data.purpose = coursestr;

      this.$emit("action");
    },
    intentionProject_select(item) {
      let { value, name } = item;
      this.currentCourse.project = value;
      this.currentCourse.projectName = name;
      this.intentionProject_show = false;
    },

    course_status_select(item) {
      let { value, name } = item;
      this.currentCourse.authStatus = value;
      this.currentCourse.authStatusName = name;
      this.course_status_show = false;
    },
    addMailHandle() {
      let item = {
        id: "0",
        postalCode: "",
        recName: "",
        recPhone: "",
        recAdd: "",
        tranType: "1",
      };
      this.mailList.push(item);
    },
    delMailHandle(idx) {
      this.mailList.splice(idx, 1);
    },
    addCourseHandle() {
      let item = {
        id: "",
        school: "",
        project: "",
        course: "",
        authStatus: "",
        authUrl: "",
        failCause: "",
        fileList: [],
      };
      this.courseList.push(item);
    },
    delCourseHandle(idx) {
      this.courseList.splice(idx, 1);
    },
    imgAfterRead(file) {
      let f = file.file;
      let self = this;
      let form = new FormData();
      debugger;
      form.append("file", f);
      uploadFile(form)
        .then((res) => {
          let { data, code, msg } = res;
          if (code == 200) {
            let { path } = data;
            self.currentCourse.fileList = [
              {
                url: path,
                deletable: true,
                imageFit: "contain",
              },
            ];
          } else {
            self.$toast(msg);
          }
        })
        .catch((e) => {
          let { msg } = e;
          if (msg == undefined) {
            self.$toast(msg);
          } else {
            self.$toast(e);
          }
        });
    },
    imgclickUpload(item) {
      this.currentCourse = item;
    },

    showxm(data) {
      this.currentCourse = data;
      this.intentionProject_show = true;
    },
    showrz(data) {
      this.currentCourse = data;
      this.course_status_show = true;
    },
  },
};
</script>

<style scoped>
.tv {
  width: calc(100% - 36px);
  font-size: 12px;
  border: 1px solid #ebebeb;
  margin-left: 12px;
  padding: 3px 6px;
  min-height: 90px;
  border-radius: 4px;
}

van-field {
  border: none;
}
</style>